<template>
  <div style="margin-left:20px">
    <el-row>
      <el-col :span="12">
        <h3>一、标签</h3>
        <div>
          <h4>1.1、基础用法</h4>
          <el-tag>标签一</el-tag>
          <el-tag type="success">标签二</el-tag>
          <el-tag type="info">标签三</el-tag>
          <el-tag type="warning">标签四</el-tag>
          <el-tag type="danger">标签五</el-tag>
        </div>

        <div>
          <h4>1.2、可移除</h4>
          <el-tag closable>标签一</el-tag>
          <el-tag type="success" closable>标签二</el-tag>
          <el-tag type="info" closable>标签三</el-tag>
          <el-tag type="warning" closable>标签四</el-tag>
          <el-tag type="danger" closable>标签五</el-tag>
        </div>

        <div>
          <h4>1.3、不同尺寸</h4>
          <el-tag closable>默认标签</el-tag>
          <el-tag size="medium" closable>中等标签</el-tag>
          <el-tag size="small" closable>小型标签</el-tag>
          <el-tag size="mini" closable>超小标签</el-tag>
        </div>

      </el-col>

      <el-col :span="1">
        <div class="line"></div>
      </el-col>

      <el-col :span="11">
        <h3>二、进度条</h3>
        <div style="margin-top:30px">
          <h4>1.1、线形进度条</h4>
          <el-progress :percentage="50"></el-progress>
          <el-progress :percentage="100" :format="format"></el-progress>
          <el-progress :percentage="100" status="success"></el-progress>
          <el-progress :percentage="100" status="warning"></el-progress>
          <el-progress :percentage="50" status="exception"></el-progress>
        </div>

        <div style="margin-top:30px">
          <h4>1.2、环形进度条</h4>
          <el-progress type="circle" :percentage="0"></el-progress>
          <el-progress type="circle" :percentage="25"></el-progress>
          <el-progress type="circle" :percentage="100" status="success"></el-progress>
          <el-progress type="circle" :percentage="70" status="warning"></el-progress>
          <el-progress type="circle" :percentage="50" status="exception"></el-progress>
        </div>

      </el-col>

    </el-row>

  </div>
</template>

<script>

export default {
  data () {
    return {

    }
  },


  methods: {

    format (percentage) {
      return percentage === 100 ? '满' : `${percentage}%`;
    }

  }


}
</script>

<style scoped>
.line {
  border-left: 1px solid #9e9e9e;
  height: 1000px;
  margin-left: 8px;
}
</style>